<template>
  <div class="min-h-screen flex flex-col">
      <!-- 顶部导航栏 -->
      <header class="sticky top-0 w-full bg-white shadow-md z-99">
          <div class="container mx-auto px-4">
              <div class="flex justify-between items-center h-16">
                  <!-- Logo 部分 -->
                  <router-link 
                      to="/" 
                      class="flex items-center group"
                      aria-label="返回首页"
                  >
                      <img 
                          alt="logo"
                          class="w-10 h-10 mr-2 transition-transform duration-300 hover:scale-105"
                          src="@/assets/logo.svg"
                          loading="lazy"
                      />
                      <span class="text-xl font-bold text-blue-600 group-hover:text-blue-700 transition-colors">
                          网站名称
                      </span>
                  </router-link>

                  <!-- 桌面导航 -->
                  <nav class="hidden md:flex space-x-6">
                      <router-link 
                          v-for="nav in navItems"
                          :key="nav.path"
                          :to="nav.path"
                          class="px-3 py-2 rounded-md font-medium transition-colors"
                          :class="{
                              'text-blue-600 bg-blue-50': route.path === nav.path,
                              'text-gray-600 hover:text-blue-600 hover:bg-blue-50': route.path !== nav.path
                          }"
                      >
                          {{ nav.name }}
                      </router-link>
                  </nav>

                  <!-- 移动端菜单按钮 -->
                  <button 
                      class="md:hidden p-2 rounded-lg hover:bg-gray-100"
                      @click="isMobileMenuOpen = !isMobileMenuOpen"
                      aria-label="导航菜单"
                  >
                      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path 
                              stroke-linecap="round" 
                              stroke-linejoin="round" 
                              stroke-width="2" 
                              :d="isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'"
                          />
                      </svg>
                  </button>
              </div>

              <!-- 移动端菜单 -->
              <transition
                  enter-active-class="transition ease-out duration-100"
                  enter-from-class="transform opacity-0 scale-95"
                  enter-to-class="transform opacity-100 scale-100"
                  leave-active-class="transition ease-in duration-75"
                  leave-from-class="transform opacity-100 scale-100"
                  leave-to-class="transform opacity-0 scale-95"
              >
                  <nav v-show="isMobileMenuOpen" class="md:hidden pb-4">
                      <router-link 
                          v-for="nav in navItems"
                          :key="nav.path"
                          :to="nav.path"
                          class="block px-3 py-2 rounded-md font-medium"
                          :class="{
                              'text-blue-600 bg-blue-50': route.path === nav.path,
                              'text-gray-600 hover:text-blue-600 hover:bg-blue-50': route.path !== nav.path
                          }"
                          @click="isMobileMenuOpen = false"
                      >
                          {{ nav.name }}
                      </router-link>
                  </nav>
              </transition>
          </div>
      </header>

      <!-- 主内容区域 -->
      <main class="flex-grow">
          <div class="w-full">
              <router-view v-slot="{ Component }">
                  <transition name="fade" mode="out-in" appear>
                      <component :is="Component" />
                  </transition>
              </router-view>
          </div>
      </main>

      <!-- 页脚 -->
      <footer 
          :class="{ 'opacity-0':!mainContentMounted }"
          class="bg-gray-800 text-white transition-opacity duration-300"
      >
          <div class="container mx-auto p-4">
              <div class="grid grid-cols-1 md:grid-cols-6 gap-8 text-sm">
                  <!-- 公司信息 -->
                  <div class="space-y-3">
                      <h3 class="text-lg font-semibold text-gray-200">关于我们</h3>
                      <p class="text-gray-400 leading-relaxed">
                          专业的互联网解决方案提供商，致力于为企业提供优质数字化服务
                      </p>
                  </div>

                  <!-- 快速链接 -->
                  <div class="space-y-3">
                      <h3 class="text-lg font-semibold text-gray-200">快速链接</h3>
                      <ul class="space-y-2">
                          <li v-for="link in navItems" :key="link.name">
                              <router-link 
                                  :to="link.path" 
                                  class="text-gray-400 hover:text-blue-400 transition-colors"
                              >
                                  {{ link.name }}
                              </router-link>
                          </li>
                      </ul>
                  </div>

                  <!-- 联系方式 -->
                  <div class="space-y-3">
                      <h3 class="text-lg font-semibold text-gray-200">联系我们</h3>
                      <ul class="space-y-2 text-gray-400">
                          <li>
                              <router-link 
                                  to="/contact" 
                                  class="text-gray-400 hover:text-blue-400 transition-colors"
                              >
                                  联系方式
                              </router-link>
                          </li>
                      </ul>
                  </div>
              </div>

              <!-- 版权信息 -->
              <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm flex space-x-4 ">
                  <p>Copyright - © 2025 网站名称 版权所有</p>
                  <a href="#">备案号：沪ICP备xxxxxxx号-1</a>
              </div>
          </div>
      </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

interface NavItem {
  name: string;
  path: string;
}

const route = useRoute();
const isMobileMenuOpen = ref(false);
const mainContentMounted = ref(false);

const navItems = ref<NavItem[]>([
  { name: '首页', path: '/' },
  { name: '关于我们', path: '/about' },
  { name: '服务', path: '/services' },
  { name: '联系我们', path: '/contact' }
]);

onMounted(() => {
  setTimeout(() => {
      mainContentMounted.value = true;
  }, 0);
});
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>    